<template>
  <div class="contail">
    <div class="contail-content">
      <div class="contail-l">
        <Sidebar />
      </div>
      <div class="contail-r">
        <div class="contail-top">
          <Top />
        </div>
        <div id="view">
          <!-- 主体视图层 -->
          <router-view class="avue-view" />
        </div>
      </div>
    </div>
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group> -->
  </div>
</template>
<script>
import Sidebar from "./sidebar";
import Top from "./top";

import { mapGetters } from "vuex";

export default {
  components: {
    Top,
    Sidebar,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["isCollapse"]),
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.contail {
  width: 100vw;
  height: 100vh;

  .contail-top {
    height: 64px;
    line-height: 64px;
  }

  .contail-content {
    height: calc(100vh - 64px);

    .contail-l {
      float: left;
      height: 100%;
    }

    .contail-r {
      height: 100%;
      box-sizing: border-box;
    }
  }
}

#view {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  box-sizing: border-box;
}
</style>
